<template>
	<Layout class="p-5 bg-white">
		<Form class="p-5" :label-white="100">
			<Row>
				<Col span="8">
				<FormItem class="w-100 p-1" label="编号">
					<label>{{wxServer.wid}}</label>
				</FormItem>
				</Col>
				<Col span="8">
				<FormItem class="w-100 p-1" label="状态">
					<i-switch size="large" v-model="wxServer.statu">
						<span slot="open" value="true">启用</span>
						<span slot="close" value="flase">禁用</span>
					</i-switch>
				</FormItem>
				</Col>
				<Col span="8">
				<FormItem class="w-100 p-1" label="公众号类型">
					<Select :disabled="true" class="w-50" v-model="wxServer.wxType">
						<Option v-for="(item, index) in wxTypes" :value="item.value" :key="index">{{ item.label }}
						</Option>
					</Select>
				</FormItem>
				</Col>
			</Row>
			<Layout v-if="wxServer.wxType==='P'" class="bg-white">
				<Row>
					<Col span="12">
					<FormItem class="w-100 p-1" label="商户号">
						<Input v-model="wxServer.merchantId"></Input>
					</FormItem>
					</Col>
					<Col span="12">
					<FormItem class="w-100 p-1" label="支付地址">
						<Input v-model="wxServer.payUrl"></Input>
					</FormItem>
					</Col>
				</Row>
				<Layout class="w-100 bg-white p-1">
					<h3 class="w-100 p-1">
						V3-配置信息
					</h3>
					<Row>
						<Col span="12">
						<FormItem class="w-100 p-1" label="商户证书序列号">
							<Input v-model="wxServer.merchantSerialNo"></Input>
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem class="w-100 p-1" label="V3秘钥">
							<Input v-model="wxServer.apiV3Key"></Input>
						</FormItem>
						</Col>
					</Row>
					<Row>
						<Col span="24">
						<FormItem class="w-100 p-1" label="私钥字符串">
							<Input type="textarea" v-model="wxServer.merchantPrivateKeyStr"></Input>
						</FormItem>
						</Col>
					</Row>
				</Layout>
				<Layout v-if="false" class="w-100 bg-white p-1">
					<h3 class="w-100 p-1">
						V2-配置信息
					</h3>
					<Row>
						<Col span="12">
						<FormItem class="w-100 p-1" label="V2秘钥">
							<Input v-model="wxServer.apiV2Key"></Input>
						</FormItem>
						</Col>
					</Row>
					<Row>
						<Col span="12">
						<FormItem class="w-100 p-1" label="证书文件">
							<input id="wxServer.v2Cert" @change="selectV2Cert" style="display: none;"
								type="file"></input>
							<label
								for="wxServer.v2Cert">{{v2Cert.path ? v2Cert.path : (v2Cert.name ? v2Cert.name : '选择证书')}}</label>
						</FormItem>
						</Col>
					</Row>
					<!-- <Row>
						<Col span="12">
						<FormItem class="w-100 p-1" label="私钥文件">
							<input type="file" style="display: none;" @change="selectV2PrivateKey" id="wxServer.v2PrivateKey" />
							<label for="wxServer.v2PrivateKey">{{v2PrivateKey.path ? v2PrivateKey.path : (v2PrivateKey.name ? v2PrivateKey.name : '选择证书')}}</label>
						</FormItem>
						</Col>
					</Row> -->
				</Layout>
			</Layout>
			<Layout v-else class="bg-white">
				<Row>
					<Col span="12">
					<FormItem class="w-100 p-1" label="APPID">
						<Input v-model="wxServer.appId"></Input>
					</FormItem>
					</Col>
					<Col span="12">
					<FormItem class="w-100 p-1" label="密钥">
						<Input v-model="wxServer.accessKey"></Input>
					</FormItem>
					</Col>
				</Row>
			</Layout>
			<FormItem>
				<Button @click="submit" type="primary">提交</Button>
				<Button @click="cancel" style="margin-left: 40px">取消</Button>
			</FormItem>
		</Form>
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
				v2Cert: {
					name: "",
					file: undefined,
					path: ""
				},
				v2PrivateKey: {
					name: "",
					file: undefined,
					path: ""
				},
				wxServer: {
					wxType: '',
					appId: "",
					accessKey: "",
					merchantId: "",
					merchantSerialNo: "",
					merchantPrivateKeyStr: "",
					apiV3Key: "",
					certV2: "",
					privateKeyV2: "",
					payUrl: ""
				},
				wxTypes: [{
						value: 'D',
						label: '订阅号'
					},
					{
						value: 'S',
						label: '服务号'
					},
					{
						value: 'Y',
						label: '应用号'
					},
					{
						value: 'P',
						label: '商户号'
					},
				],
			}

		},
		methods: {
			selectV2Cert: function(event) {
				this.v2Cert.file = event.target.files[0];
				this.v2Cert.name = event.target.files[0].name;
				this.v2Cert.path = "";
			},
			selectV2PrivateKey: function(event) {
				this.v2PrivateKey.file = event.target.files[0];
				this.v2PrivateKey.name = event.target.files[0].name;
			},
			submitOther: function() {
				this.wxServer.merchantId = "";
				this.wxServer.merchantSerialNo = "";
				this.wxServer.merchantPrivateKeyStr = "";
				this.wxServer.apiV3Key = "";
				this.wxServer.apiV2Key = "";
				this.wxServer.certV2 = "";
				this.wxServer.privateKeyV2 = "";
				this.wxServer.payUrl = "";

				if (this.common.isEmptyString(this.wxServer.wxType)) {
					this.message.error("公众号类型必须输入");
					return;
				}

				if (this.common.isEmptyString(this.wxServer.appId)) {
					this.message.error("APPID必须输入");
					return;
				}
				if (this.common.isEmptyString(this.wxServer.accessKey)) {
					this.message.error("SecretKey必须输入");
					return;
				}

				let self = this;
				this.http.put({
					url: "store/wx-server/info",
					param: {
						wxServer: self.wxServer,
						storeId: self.storeId
					}
				}).then(data => {
					self.message.info("更新成功");
					self.cancel();
				});
			},
			submitPayment: function() {
				let self = this;

				if (this.common.isEmptyString(this.wxServer.wxType)) {
					this.message.error("公众号类型必须输入");
					return;
				}

				if (this.common.isEmptyString(this.wxServer.merchantId)) {
					this.message.error("商户号必须输入");
					return;
				}
				if (this.common.isEmptyString(this.wxServer.merchantSerialNo)) {
					this.message.error("V3商户证书序列号必须输入");
					return;
				}
				if (this.common.isEmptyString(this.wxServer.merchantPrivateKeyStr)) {
					this.message.error("V3私钥必须输入");
					return;
				}
				if (this.common.isEmptyString(this.wxServer.apiV3Key)) {
					this.message.error("V3秘钥必须输入");
					return;
				}
				
				if (this.common.isEmptyString(this.wxServer.payUrl)) {
					this.message.error("支付地址必须输入");
					return;
				}

				self.http.put({
					url: "store/wx-server/info",
					param: {
						wxServer: self.wxServer
					}
				}).then(data => {
					self.message.info("新增成功");
					self.cancel();
				});
				
			},
			submit: function() {
				if (this.wxServer.wxType == "P") {
					this.submitPayment();
				} else {
					this.submitOther();
				}
			},
			cancel: function() {
				this.$tabs.close();
			},
			find: function() {
				this.http.get({
					url: "store/wx-server/info",
					param: {
						wId: this.wxServer.wId
					}
				}).then(data => {
					this.wxServer = data;
					this.v2Cert.path = this.wxServer.certV2;
				});
			},
			cancel: function() {
				this.$tabs.close();
			},

		},
		created: function() {
			this.wxServer.wId = this.$route.params.wId;
			this.find();
		},
	}
</script>
<style>
</style>
